<template>
  <div style="position: relative; width: 100%; height: 100%;">
    <div style="width: 100%; height: 100%;" v-html="videoHtml">
    </div>
    <div style="width: 100%; height: 100%; position: absolute; top: 0; left: 0;" @click="$emit('click')">
    </div>
  </div>
</template>
<script>
  import videojs from 'video.js'
  import "videojs-flash"
  import "video.js/dist/video-js.min.css"
  export default {
    name: "HlsPlayer",
    props: {
      // 播放流格式
      // protocol: {
      //   type: String,
      //   default: 'hls'  //  hls
      // },
      // url: {       //
      //   type: String,
      //   default: ''
      // }
    },
    data() {
      return {
        playerId: '',
        player: null,
        videoHtml: ''
      }
    },
    mounted() {
      this.playerId = 'videojsplayer_' + Math.random().toString(36).substr(2)
      this.videoHtml = '<video id="'+this.playerId+'" class="video-js" poster="loading.jpg"></video> '
    },
    beforeDestroy() {
      if(this.player) {
        this.player.dispose()
        this.player = null
      }
			this.videoHtml = null
    },
    methods: {
      play (source) {
        console.log('开始播放视频源：' + source + ' playerId:'+this.playerId)
        this.player= videojs(this.playerId, {
          // muted: true,
          // controls: true,
          autoplay: true
        })
        this.player.src({
          src: source,
          type: 'application/x-mpegURL'
        })
        // console.log(source)
        // this.player.volume(0)
      },
      stop () {
        if(this.player) {
          this.player.pause()
          this.player.dispose()
          this.player = null
        }
      }
    }
  }
</script>
<style>
  .video-js{
    width: 100%;
    height: 100%;
  }
</style>
